[VueJS] Creating a custom directive v-visible for visibility

If you use VueJS, you will often use v-if and v-show. You might wonder why there isn't a v-visible when using visibility: hidden would be so useful... In this regard, we will try to create a v-visible custom directive below. Find out how you can create custom directives.



First, the desired function of v-visible is as follows:

• Create a directive, similar to v-if or v-show
• Applies visibility: hidden to the element to make it hidden
• Still occupy space, making it easy and fast to apply.

We will create the v-visible directive below to meet these three requirements. First, let's learn how to create a simple custom directive.

# Creating a custom v-visible directive in VueJS or NuxtJS.

Before creating the custom directive v-visible, let's first learn about the setup method. Both Vuejs and Nuxtjs are similar, but the location for setting up the directive is different. It's like the following:

1. In the case of VueJS:
You can apply it to main.js like this.

@ main.js


2. What about NuxtJS?
If you're using NuxtJS, you'll need to make a separate file and apply it to the plugins block in the nuxt.config.js file.

- Find the plugins block in nuxt.config.js.
- Create a directives.js file in that block.
- Create directives in the directives.js file.

@ directives.js


The way to add a directive is as shown above. Note that Vue provides the ability to create custom directives and also provides various hooks. The code below is a simple directive that works in Mounted and Updated in Shortcut format, but it is also worth noting that you can use various lifecycle hooks.

Related link about custom directive >
https://vuejs.org/guide/reusability/custom-directives.html#introduction


Now, let's try to write the code portion where the directive can function. Above, we only specified the name 'visible'. The next argument section will contain the function that will be executed. Let's make an example for NuxtJS. The code below should be included in the added file in the plugins folder!

All codes are completed with this. It's a really simple code.

If you only need a custom directive, you can simply use the above code. We will examine the code one by one below. The content is as follows:
In creating the first directive, the directive name was set as 'visible'. And to get the value from the binding corresponding to the second argument, it was received as { value }. It can also be received as binding.value.

Inside the function, if the value is true, the visibility: 'visible' value is used for the applied tag, and if it is false, visibility: 'hidden' is used. This is the part below!

Do you know the difference between visibility: hidden and display: none in CSS styles? It pertains to whether or not the element is occupying space. The visibility property is often used with logical style attributes or style attributes that are affected by surrounding elements. Now you can use the above directives in your app.

To apply the custom directive v-visible, use it as a directive on the tag or component element. If it varies depending on the value of the isVisible variable, use it as shown below.

Creating a custom directive up to this point is complete!


[ Note ]
By the way, when applying the above method, it was confirmed that using v-visible in NuxtJS works, but an error message is displayed on the console. Interestingly, v-bind:visible or :visible did not cause an error... Since it seems to work properly, it may be an issue related to the version. Please also refer to this point!